const {
    resolve
} = require('path');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口起点文件
    entry: './src/index.js',
    // 输出文件（index.html引入的文件）
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                // use中，执行顺序是从下到上，从右到左
                // 创建style标签，将js中的样式资源插入进行，添加到head中执行
                'style-loader',
                // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                'css-loader'
            ]
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            // 处理图片的loader，如果图片大于limit，那会使用file-loader
            // file-loader：把图片复制到输出目录下，经过css-loader处理后，出口文件会引用此图片
            loader: 'url-loader',
            options: {
                // 小于5k的图片会进行base64编码成字符串直接放入文件
                // 大于5k的图片会复制到入口文件正常下载
                limit: 5 * 1024,
                // 哈希值只取10位，加上原本的文件名
                name:'[hash:10].[ext]'
            }
        },{
            // 处理html的img图片（负责引入img，从而被url-loader处理）
            test:/\.html$/,
            loader:'html-loader'
        }]
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        // 默认创建一个空的html文件，自动引入打包输出的所有文件（bundle.js,index.css）
        new HtmlWebpackPlugin({
            // 输出的html文件以此作为模板自动引入打包输出的所有文件
            template:'./src/index.html'
        })
    ],
    mode: 'development', //开发模式
    // mode:'production'//生产模式
};